<template>
  <el-card>
    <itable :table="tconfig.tableConfig" :tableData="tconfig.tableData" :page-bean="tconfig.pageBean" @pageChange="pageChange">
      <template #searchBox>
        <ikechenform
          :model="form"
          :elem="fromData"
          labelWidth="100"
          :submit="true"
          :reset="true"
          :button="false"
          okIcon="Search"
          btnSize="small"
          submitText="搜索"
          @onSuccess="onSuccess"
          @onReset="clcikReset"
        >
        <template #custom>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="系统监测到项目计划实施异常会在每天9点推送给所选用户"
            placement="top-start"
          >
          <el-icon size="21"><QuestionFilled /></el-icon>
          </el-tooltip>
        </template>
      </ikechenform>
      </template>
    </itable>
  </el-card>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue';
import itable from '@/components/table/table.vue'
import { PageBean } from "@/utils/page-bean";
import ikechenform from "components/ITable/index.vue";
const options = ref([
  {label:'11',value:'1'}
])
let fromData = reactive([
  {
    label: "项目楼层",
    prop: "value",
    clearable: true,
  },
  {
    element:'date',
    label: "计划总工期",
    type:'datetimerange',
    prop: "time",
    clearable: true,
  },
  {
    element:'select',
    label: "告警提示人",
    multiple:true,
    prop: "logType",
    option:options,
    clearable: true,
  },
])
let form = reactive({
  value:'',
  logType:[],
  time:[
    new Date(2016, 9, 10, 8, 40),
    new Date(2016, 9, 10, 9, 40),
  ]
})

const tconfig = reactive({
  tableConfig: {} as {loading:boolean,[propName:string]:any},
  tableData: [{currenttime:'1',costtime:'2',onreason:'3',watermeter:'true'}] as any[],
  pageBean: new PageBean(10, 1, 0),
})
const clcikReset = () => {
  console.log('77')
}
const onSuccess = (form) => {
  console.log(form)
}
const pageChange = () => {

}

// 初始化表格
const initTable = () => {
  tconfig.tableConfig = {
    loading: false,
    hasSelect: false,
    hasIndex: true,
    hasOperation: true,
    hasSearch: true,
    hasPage: false,
    tr: [
      {
        label: "预警类别",
        minWidth: "140",
        prop: "currenttime",
      },
      {
        label: "预警类别说明",
        minWidth: "110",
        prop: "costtime",
      },
      {
        label: "预警通知人员",
        minWidth: "160",
        prop: "onreason",
      }
    ],
    operation:{
      label:'操作',
      data:[
        {label:'查看', icon:'el-icon-s-operation', size:'small', type:'text',classname:'look'},
        {label:'编辑', icon:'el-icon-edit', size:'small', type:'text',classname:'compile'},
        {label:'删除', icon:'el-icon-delete', size:'small', type:'text',classname:'delete'}
      ]
    }
  }
}
initTable()
</script>

<style lang='scss' scoped>

</style>
